<template>
  <section class="index">
    <h1>A应用 /a页面</h1>
    <div>
      <a href="/admin/element-plus.full.min.css" target="_blank" download @click="downLoadFile">测试不跨域下载</a>
    </div>
    <div>
      <a href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.css" target="_blank" download @click="downLoadFile">测试跨域下载</a>
    </div>
    <button @click="navigateTo">跳到A应用 /b页面</button>
    <button @click="getElement">获取body节点试试</button>
    <button @click="openDialog">弹个窗口试试</button>
    <div style="background-color: lightblue;">
      <h2 @click="toggle">子应用A嵌套 子应用B</h2>
      <!-- 线上 -->
      <!-- <micro-app-a
        iframe 
        keep-alive
        name='appBk'
        default-page="/c"
        url='https://microapp.lammu.cn/microappB/'
      ></micro-app-a> -->
      <MicroApp
        v-if="isShowSubApp"
        subAppName="appBk"
        subAppPath="/a"
        v-bind="microAppProps"
      ></MicroApp>
      <!-- 本地 -->
      <!-- <micro-app-a
        iframe 
        keep-alive
        name='appBk'
        default-page="/c"
        url='http://127.0.0.1:2334/'
      ></micro-app-a> -->
    </div>
    
  </section>
</template>

<script lang="ts" setup>
import { onBeforeRouteLeave, useRouter } from "vue-router";
import MicroApp from './MicroApp.vue';
import { onBeforeUnmount, ref } from "vue";
import { reactive } from "vue";

const microAppProps = reactive({
  a: 1, 
  b: 2,
  timeStamp: 3,
})

// setInterval(() => {
//   microAppProps.timeStamp = Date.now()
// }, 3000)

const isShowSubApp = ref(true);
function toggle() {
  isShowSubApp.value = !isShowSubApp.value;
}

const router = useRouter();
function navigateTo() {
  router.push("/b");
}
function getElement() {
  console.log(document.getElementsByTagName("body"));
}
function openDialog() {
  alert('弹窗测试');
}

function downLoadFile (e) {
  /** 不跨域, 直接下载 */
  if (location.origin === new URL(e.target.href).origin) {
    console.log('不跨域, 直接下载');
    return;
  } else {
    console.log('跨域, 转为blob下载');
    e.preventDefault() // 阻止默认下载
    // 注意href必须是绝对地址
    fetch(e.target.href).then((res) => {
      res.blob().then((blob) => {
        const blobUrl = window.URL.createObjectURL(blob)
        // 转化为blobURL后再通过a标签下载
        const a = document.createElement('a')
        a.href = blobUrl
        a.download = 'normalize.css'
        a.click()
        window.URL.revokeObjectURL(blobUrl)
      })
    })
  }
}

</script>

<style scoped>
.index {
  width: 100%;
}
button {
  color: blue;
}
</style>
